import {
    Button,
    Card,
    Divider,
    Form,
    Image,
    Input,
    message,
    Typography
} from 'antd'
import {LockOutlined, UserOutlined} from '@ant-design/icons'
import {useNavigate} from 'react-router-dom'
import ring from '../assets/img/login.png'
import {adminInfoAPI, loginAPI} from '../service/auth'
import {setStorage, setToken} from '../utils/tools'

export default function Home() {
    const navigate = useNavigate()
    const doLogin = async (values) => {
        const res = await loginAPI(values)
        console.log(res)
        if (res.code === '0') {
            // 登录成功
            setToken(res.data.jwt)
            // 获取管理员信息
            const info = await adminInfoAPI()
            console.log(info)
            // 存储管理员角色 0-平台  1-商家
            setStorage('accountType', info.data.accountType)
            // 存储管理员名称
            setStorage('nickname', info.data.nickname)
            // 保存用户id
            setStorage('userId', info.data.id)
            message.success('登录成功')
            navigate('/admin')
        } else {
            message.error('登录失败')
        }
    }

    return (
        <div className="page" style={{paddingTop: 250}}>
            <div className="login-logo">
                <img
                    class="image_2"
                    referrerpolicy="no-referrer"
                    src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng144deb7c253bae15f4cee1b871a72070b2fc6159c42d8b46ec3a35a918c033c5"
                />
                <img
                    class="image_3"
                    referrerpolicy="no-referrer"
                    src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngea8eefd7d91f66de0cc290db2ab59637927cb606305fe9ba885befdb664ead7a"
                />
                <span class="text_8">LBS智慧营销管理系统</span>
            </div>
            {/* 卡片 */}
            <Card
                style={{
                    width: 600,
                    margin: '0 auto'
                }}
            >
                <div style={{display: 'flex'}}>
                    {/* 左侧：图片 */}
                    {/* preview={false} 关闭预览 */}
                    <Image width={200} src={ring} preview={false}/>
                    {/* 中间：分割线 */}
                    <Divider type="vertical" style={{height: 220}}/>
                    {/* 右侧：表单 */}
                    {/* labelCol  左侧标签文字占的列数
            wrapperCol  右侧包裹的输入区域占的列数
          */}
                    <Form
                        // 监听提交成功
                        onFinish={doLogin}
                        style={{flex: 1, paddingLeft: 15, paddingTop: 15}}
                        // labelCol={{
                        //   span: 6
                        // }}
                        wrapperCol={{
                            span: 24
                        }}
                    >
                        {/* 表单项 */}
                        <Form.Item>
                            <Typography.Title level={4} style={{textAlign: 'center'}}>
                                欢迎登录LBS管理系统
                            </Typography.Title>
                        </Form.Item>
                        <Form.Item
                            name="phone"
                            // 表单验证，required不能为空，message提示消息
                            rules={[{required: true, message: '用户名不能为空'}]}
                            // 设置初始值
                            initialValue="19941253145"
                        >
                            <Input
                                placeholder="请输入管理员用户名"
                                prefix={<UserOutlined/>}
                            />
                        </Form.Item>
                        <Form.Item
                            name="password"
                            rules={[{required: true, message: '密码不能为空'}]}
                            initialValue="123456"
                        >
                            <Input.Password
                                placeholder="请输入密码"
                                prefix={<LockOutlined/>}
                            />
                        </Form.Item>
                        {/* offset 偏移量，左侧留出的空间 */}

                        <Form.Item>
                            {/* htmlType 设置为提交按钮，否则没有提交功能
                block 设置为100%
              */}
                            <Button type="primary" block htmlType="submit">
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </Card>
        </div>
    )
}
